html,
body,
ul,
li,
span,
p,
div,
a,
form,
input,
button,
img,
h1,
h2,
h3,
h4,
h5,
h6,
header,
td,
th,
dd,
dl,
tr,
table,
footer,
main,
aside,
article,
section,
select,
option {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html {
	font-size: 100px;
	min-width: 3.2rem;
}

body {
	font-size: 16px;
	min-width: 3.2rem;
}

ul,
li {
	list-style: none;
}

a {
	text-decoration: none;
}

#app {
	background-color: #011957;
	height: 100vh;
	margin: 0 auto;
	max-width: 12rem;
	min-width: 3.2rem;
}

#app .read-list .list-item {
	float: left;
	position: relative;
	color: #ffffff;
	/*border: 1px solid #ffffff;*/
	width: 20%;
	height: .5rem;
	padding: .05rem;
	font-size: .18rem;
}

#app .read-list .list-item .list-item-wrap {
	width: 100%;
	height: 100%;
	border-radius: .05rem;
	background-color: #6745B5;
}

.position-center {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*border: 1px solid #fff;*/
}

.position-right {
	display: block;
	position: absolute;
	top: 50%;
	right: .1rem;
	transform: translateY(-50%);
	/*background-color: yellow;*/
}

.arrow {
	width: .2rem;
	height: .2rem;
	border-radius: .05rem;
	background-color: #011957;
	line-height: .18rem;
	text-align: center;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
	#app .read-list .list-item {
		width: 25%;
	}
}

@media screen and (min-width: 480px) and (max-width: 768px) {
	#app .read-list .list-item {
		width: 25%;
		font-size: .14rem;
	}

	.arrow {
		width: .16rem;
		height: .16rem;
		line-height: .15rem;
	}

	.position-center {
		left: 30%;
		transform: translate(-50%, -50%);
	}

	.list-item:nth-of-type(1)>.list-item-wrap:nth-of-type(1)>.position-center {
		left: 21%;
		transform: translate(-50%, -50%);
	}
}

@media screen and (max-width: 479px) {
	#app .read-list .list-item {
		width: 33%;
		font-size: .1rem;
	}

	.arrow {
		width: .12rem;
		height: .12rem;
		line-height: .12rem;
	}

	.position-center {
		left: 30%;
		transform: translate(-50%, -50%);
	}

	.list-item:nth-of-type(1)>.list-item-wrap:nth-of-type(1)>.position-center {
		left: 19%;
		transform: translate(-50%, -50%);
	}
}
